<template>
  <div class="couponYH">
    <div class="discount">
        <div class="discount-title clearfix">
          <router-link
          to="/" tag="span"
          class="mui-icon mui-icon-arrowleft"></router-link>
          <h2 class="">肯德基优惠券1</h2>
        </div>
    </div>
    <h3>--点餐前出示手机中的优惠券，即可享受优惠--</h3>
    <div class="container">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item, index) in list" :key="index">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" :src="imgUrl(index)">
                <div class="mui-media-body">
                    <h4>{{item.couponProductName}}</h4>
                    <p class='mui-ellipsis red'>{{item.couponProductPrice}}</p>
                    <p class='mui-ellipsis red fz'>{{item.couponProductTime}}</p>
                </div>
            </a>
        </li>
      </ul>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "../publicComponents/mmFooter.vue";
export default {
  data() {
    return {
      list: [],
      title: ''
    }
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    getList() {
      var id = this.$route.params.id
      this.$http.get('api/getcouponproduct?'+id).then((res) => {
        this.list = res.body.result
        // console.log(this.list)
      })
    },
    imgUrl(i) {
      var href = ''
      this.list.forEach((item ,index) => {
        if(i === index) {
          href = item.couponProductImg.slice(item.couponProductImg.indexOf('"')+1,item.couponProductImg.lastIndexOf(' alt')-1)
          // console.log(href)
         return
        }
      })
      return href
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
@import '../../less/var';
.couponYH{
  touch-action: pan-y;
  .discount-title {
    height: 70 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 50 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 50 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
  h3 {
    font-size: 20/@base;
    text-align: center;
    font-weight: 400;
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    white-space: unset;
  }
  .mui-table-view .mui-media-object {
    width: 200/@base;
    height: 150/@base;
    max-width: unset;
  }
  .mui-media-body {
    h4 {
      font-size: 30/@base;
      line-height: 1.3;
    }
    p.red {
      color:red;
    }
    p.fz {
      font-size: 24/@base;
    }
  }
}
</style>
